<template>
	<view class="content">
		<view class="app-title ac">
			<view class="fl" @click="back">
				<image class="back" src="/static/img/back.png"></image>
			</view>
			设备清单
		</view>
		<view class="line-select">
			<scroll-view scroll-y="true" class="scroll-Y">
				<u-collapse :head-style="headStyle" :item-style="itemStyle" event-type="close">
					<u-collapse-item :index="index" @change="itemChange" :open="index===0?true:false"
						:title="item.taskType +' | '+ item.taskYearName" v-for="(item, index) in taskList"
						:key="item.idK">
						<view class="collapse-item">
							<u-card padding="20" margin="0px" :show-head="false">
								<view class="body_box" slot="body">
									<view class="body_box_item" v-for="(deviceItem,index2) in item.deviceList"
										:key="deviceItem.id">
										<u-cell-item title="设备名称" :value="deviceItem.equName"
											:arrow="false"></u-cell-item>
										<!-- 监督功能 -->
										<u-cell-item v-if="columShow.monitor&&deviceItem.type=='监督'" title="监督状态"
											:arrow="false">
											<view slot="right-icon" class="tools">
												<u-icon name="checkbox-mark" color="#19be6b"></u-icon>
												<u-icon name="close" @click="reviewInfo(deviceItem,1)"
													color="#fa3534"></u-icon>
											</view>
										</u-cell-item>
										<!-- 卡控功能 -->
										<u-cell-item v-if="columShow.control&&deviceItem.type=='卡控'" title="卡控状态"
											:arrow="false">
											<view slot="right-icon" class="tools">
												<u-icon name="checkbox-mark" color="#19be6b"></u-icon>
												<u-icon @click="reviewInfo(deviceItem,2)" name="close"
													color="#fa3534"></u-icon>
											</view>
										</u-cell-item>
										<u-cell-item
											v-if="columShow.monitorButton&&deviceItem.type=='监督'||columShow.scanCode||columShow.nfc"
											title="开始时间" :arrow="false" arrow-direction="down">
											<view slot="right-icon" class="tools">
												<u-button v-if="!deviceItem.startTime&&type!=='view'" :plain="false"
													type="primary" size="mini" :ripple="true"
													@click="!deviceItem.startTime?start(index,index2):''">开始检修</u-button>
												<text v-else>{{deviceItem.startTime}}</text>
											</view>
										</u-cell-item>
										<u-cell-item v-if="columShow.monitorButton&&deviceItem.type=='监督'" title="结束时间"
											:arrow="false" arrow-direction="down">
											<view slot="right-icon" class="tools">
												<u-button v-if="!deviceItem.endTime&&type!=='view'"
													:disabled="!deviceItem.startTime" :plain="false" type="primary"
													size="mini" :ripple="true"
													@click="!deviceItem.endTime?end(index,index2):''">结束检修</u-button>
												<text v-else>{{deviceItem.endTime}}</text>
											</view>
										</u-cell-item>
										<view class="rowClass" v-if='columShow.scanCode||columShow.nfc'>
											<u-cell-item v-if="columShow.scanCode" title="设备扫码" :arrow="false"
												arrow-direction="">
												<view slot="right-icon" class="tools">
													<u-button v-if="!deviceItem.scanCode&&type!=='view'" type="primary"
														size="mini" :ripple="true"
														@click="scanCode(index,index2)">扫码</u-button>
													<text v-else>{{type!=='view'?'成功':''}}</text>
												</view>
											</u-cell-item>
											<u-cell-item v-if="columShow.nfc&&type!=='view'" title="NFC读取"
												:arrow="false" arrow-direction="">
												<view slot="right-icon" class="tools">
													<u-button v-if='!deviceItem.nfcData' type="primary" size="mini"
														:ripple="true" @click="testNFC(index,index2)">NFC</u-button>
													<text v-else>{{type!=='view'?'识别成功':''}}</text>
												</view>
											</u-cell-item>
										</view>
										<u-line color="#ecf5ff" />
									</view>
								</view>
							</u-card>
						</view>
					</u-collapse-item>
				</u-collapse>

			</scroll-view>
			<view class="footer" v-if="type!=='view'">
				<u-button type="primary" size="medium" :ripple="true" @click="saveDeviceList">保存修改</u-button>
			</view>
		</view>
		<u-modal v-model="showInfo" width="auto" :title-style="titleStyle" :content-style="modelContent"
			:show-confirm-button="false" :show-cancel-button="true" :title="title" :show-title="true"
			:mask-close-able="true">
			<view class="slot-content">
				<rich-text :nodes="description"></rich-text>
			</view>
		</u-modal>
	</view>
</template>

<script>
	import selectDevice from '../../components/myWork/viewWork/selectDevice.vue'

	import {

		WORK_CONTROLLER
	} from "../../api/pms";
	var NfcAdapter;
	import NFC from '../../utils/nfc.js'
	export default {
		props: {
			detailContent: {}
		},
		components: {
			selectDevice
		},
		data() {
			return {
				taskList: [],
				show_device: false,
				show_picker: false,
				deviceName: '',
				optionEquName: '',
				columns: [],
				leaderOptions: [],
				taskIndex: "",
				deviceIndex: "",
				optionEquName: [], // 设备列表
				optionStation: [], //车站列表
				disabled: false,
				btnWidth: 180,
				show: false,
				options: [{
					text: '删除',
					style: {
						backgroundColor: '#dd524d'
					}
				}],
				headStyle: {
					fontWeight: 600,
					paddingLeft: "10px",
					paddingRight: "10px",
					backgroundColor: "#fff",
				},
				itemStyle: {
					margin: "0px 10px 10px",
					backgroundColor: "#fff",
				},
				showInfo: false,
				description: '',
				modelContent: {
					padding: "15px"
				},
				titleStyle: {
					paddingTop: "16px",
					fontWeight: 600,
				},
				deviceTaskWebcoket: null,
				deviceTaskID: null,
				title: '',
				columShow: {
					monitor: true,
					monitorButton: true,
					control: true,
					startTime: true,
					endTime: true,
					scanCode: false,
					nfc: false
				},
				btn: '',
				woSn: ''
			}
		},
		onShow() {
			this.newWebsocketInit()
			console.log('ssssss----onShow', )
		},
		async onLoad(options) {
			this.btn = options.btn;
			this.woSn = options.woSn
			this.type = options.type
			if (this.btn == 1) {
				this.columShow = {
					monitor: true,
					monitorButton: true,
					control: true,
					startTime: false,
					endTime: false,
					scanCode: false,
					nfc: false
				}
			} else if (this.btn == 2) {
				this.columShow = {
					monitor: false,
					monitorButton: false,
					control: false,
					startTime: true,
					endTime: true,
					scanCode: true,
					nfc: true
				}
			}
		},
		onHide() {
			this.deviceTaskWebcoket.close()
			this.deviceTaskWebcoket = null
		},
		mounted() {
			let task = this.$store.state.taskList
			this.taskList = task.map((item, index) => {
				return {
					...item,
					deviceList: this.splitDevice(item)
				}
			})
			console.log('this.taskList', this.taskList)
			this.leaderOptions = this.$store.state.peopleOptions
			this.getSelecConfig()
		},
		methods: {
			// 接口获取显示按钮
			getSelecConfig() {
				this.fetch(
					"GET",
					this.$store.state.baseUrl + WORK_CONTROLLER.GET_QUERY_Equstate, {
						woSn: this.woSn
					}, false
				).then((res) => {
					if (res?.returnCode == '2004') {
						this.butSelect = res.data.pmsEquControl
					}
				})
			},
			// startCheck(index1, index) {
			// 	this.deviceIndex = index;
			// 	this.taskIndex = index1;
			// 	console.log('this.taskList', this.taskList)
			// 	this.taskList[this.taskIndex].deviceList[this.deviceIndex].startCheck = this.formatDate(new Date())

			// },
			// endCheck(index1, index) {
			// 	this.deviceIndex = index;
			// 	this.taskIndex = index1;
			// 	this.taskList[this.taskIndex].deviceList[this.deviceIndex].endCheck = this.formatDate(new Date())


			// 	this.fetch(
			// 		"POST",
			// 		this.$store.state.baseUrl + WORK_CONTROLLER.End_ByEqu, {

			// 		}, false
			// 	).then((res) => {
			// 		if (res?.returnCode == '2004') {
			// 			this.butSelect = res.data.pmsEquControl
			// 		}
			// 	})
			// },
			// 获取设备列表
			getDeviceListInfo() {

			},
			// 实时获取设备状态信息。
			newWebsocketInit() {
				clearTimeout(this.deviceTaskID)
				this.deviceTaskWebcoket = uni.connectSocket({
					url: this.$store.state.wsEmerUrl + '/socket/1/emergencyToApp',
					complete: () => {}
				})
				console.log('this.deviceTaskWebcoke', this.deviceTaskWebcoke)
				this.deviceTaskWebcoket.onOpen(() => {
					console.log("WebSocket ---mergency--12--- 已连接!");
				})
				this.deviceTaskWebcoket.onClose((error) => {
					console.log("WebSocket ---mergency--12--- 关闭了!", error);
					if (error.code !== 1000) {
						this.deviceTaskWebcoket = null
						this.deviceTaskID = setTimeout(() => {
							this.newWebsocketInit()
						}, 10000)
					}
				})
				this.deviceTaskWebcoket.onMessage((message) => {
					console.log("websocket推送过来的消息：", JSON.parse(message.data))
					let emerToastInfo = JSON.parse(message.data);
					// 传回消息，获取设备信息列表
					this.getDeviceListInfo()
				})
			},
			// 监督、卡控设备 异常的点击显示信息
			reviewInfo(param, index) {
				this.description = `
					空山新雨后<br>
					天气晚来秋水水水水水水水水水水水水
				`
				index == 1 ? this.title = '监督项问题信息' : this.title = '卡控报警信息'
				this.showInfo = true
				console.log('param--', param, this.showInfo, this.description)
			},
			itemChange(param) {
				console.log('index-----', param)
				this.taskIndex = param.index
			},
			async testNFC(index1, index) {
				this.deviceIndex = index;
				this.taskIndex = index1;
				//这里用异步获取读取到的NFC数据
				const nfcId = await NFC.listenNFCStatus();
				console.log(nfcId)
				if (!nfcId) return
				this.taskList[this.taskIndex].deviceList[this.deviceIndex].nfcData = nfcId
			},
			splitDevice(param) {
				console.log('param---param', param)
				let device = []
				if (param.equName) {
					let equName = param.equName.split(',')
					let equId = param.equID.split(',')
					device = equName.map((item, index) => {
						return {
							equName: item,
							equId: equId[index],
							startTime: "",
							endTime: '',
							scanCode: "",
							nfcData: "",
							startCheck: "",
							endCheck: "",
							type: index == 0 ? "监督" : "卡控"
						}
					})
				}
				return device
			},
			back() {
				clearTimeout(this.deviceTaskID)
				this.deviceTaskWebcoket.close()
				this.deviceTaskWebcoket = null
				uni.navigateBack()
			},
			start(index1, index) {
				this.deviceIndex = index;
				this.taskIndex = index1;
				console.log('this.taskList', this.taskList)
				this.taskList[this.taskIndex].deviceList[this.deviceIndex].startTime = this.formatDate(new Date())

			},
			end(index1, index) {
				this.deviceIndex = index;
				this.taskIndex = index1;
				this.taskList[this.taskIndex].deviceList[this.deviceIndex].endTime = this.formatDate(new Date())
			},
			scanCode(index1, index) {
				this.deviceIndex = index;
				this.taskIndex = index1;
				let _this = this
				uni.scanCode({
					success: function(res) {
						console.log('设备扫码---', res)
						_this.taskList[_this.taskIndex].deviceList[_this.deviceIndex].scanCode = res.result
						console.log('设备扫码', _this.taskList[_this.taskIndex].deviceList[_this.deviceIndex]
							.scanCode)
						return
						if (res) {
							_this.fetch('GET', this.baseUrl() + '/eqtTZcController/scanCode', {
								action: '3',
								code: res.result
							}).then((res) => {

							})
						}
					}
				});
			},
			formatDate(time) {
				var date = new Date(time);
				var year = date.getFullYear(),
					month = date.getMonth() + 1, //月份是从0开始的
					day = date.getDate(),
					hour = date.getHours(),
					min = date.getMinutes(),
					sec = date.getSeconds();
				var newTime = year + '-' +
					(month < 10 ? '0' + month : month) + '-' +
					(day < 10 ? '0' + day : day) + ' ' +
					(hour < 10 ? '0' + hour : hour) + ':' +
					(min < 10 ? '0' + min : min) + ':' +
					(sec < 10 ? '0' + sec : sec);

				return newTime;
			},
			saveDeviceList(obj) {
				console.log('this-list', this.taskList)
			}

		},

	}
</script>

<style scoped lang="less">
	/deep/.u-model__footer {
		border-top: 1px solid #f0f0f0;
	}

	.u-icon {
		font-size: 16px;
	}

	.rowClass {
		display: flex;
		flex-direction: row;

		&:nth-child(2) {
			// padding-left: 5px!important;
		}
	}

	.lineClass {
		padding: 0 5px;
		// height: 40px;
	}

	.content {
		height: 100vh;
		width: 100%;
		padding-bottom: 0px;
	}

	/deep/.u-card__body {
		background-color: #fafafa;

	}



	.body_box_item {
		background-color: #fff;
		margin-bottom: 5px;
		border-radius: 5px;
		// margin: 0 10px 5px;
		padding: 0 10px;

		>.u-cell:nth-child(1) {
			font-weight: 600;
		}
	}

	.body_box {
		// background-color: #fafafa;
	}

	.u-cell {
		padding: 6px 10px !important;
	}

	.scroll-Y {
		flex: 1;
		height: 0;
		background-color: #fafafa;
		padding-top: 10px;
	}

	.footer {
		text-align: center;
		padding: 10px;
		background-color: #fff;
		margin-top: 5px;
		border-top: 1px solid #f6f6f6;
		box-shadow: 5px -1px 5px #f6f6f6;

	}

	/deep/.u-swipe-action {
		margin-bottom: 5px !important;
		border-radius: 5px;
	}

	/deep/.u-card__body {
		padding: 0px 0px 0px !important;
	}

	.line-select {
		height: calc(100vh - 132rpx);
		display: flex;
		flex-direction: column;

		.cordClass {
			padding: 0px 5px;
		}

		.card_head {
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;

			.title {
				font-weight: 600;
			}
		}
	}
</style>